import { DatePicker, Popup } from 'vant';
import { computed, defineComponent, PropType, ref, VNode } from 'vue';
import { Button } from './Button';
import { EmojiSelect } from './EmojiSelect';
import s from './Form.module.scss';
import { Time } from './time';
export const Form = defineComponent({
    props: {
        onSubmit: {
            type: Function as PropType<(e: Event) => void>,
        }
    },
    setup: (props, context) => {
        return () => (
            <form class={s.form} onSubmit={props.onSubmit}>
                {context.slots.default?.()}
            </form>
        )
    }
})

export const FormItem = defineComponent({
    props: {
        label: {
            type: String
        },
        modelValue: {
            type: [String, Number]
        },
        type: {
            type: String as PropType<'text' | 'emojiSelect' | 'date' | "validationCode" | 'select'>,
        },
        error: {
            type: String
        },
        placeholder: String,
        options: Array as PropType<Array<{ value: string, text: string }>>,
        onClick: Function as PropType<() => void>
    },
    emits: ['update:modelValue'],
    setup: (props, context) => {
        const now = new Date()
        const refDateVisible = ref(false)
        const content = computed(() => {
            switch (props.type) {
                case 'text':
                    return <input
                        value={props.modelValue}
                        placeholder={props.placeholder}
                        onInput={(e: any) => context.emit('update:modelValue', e.target.value)}
                        class={[s.formItem, s.input]} />
                case 'select':
                    return <select class={[s.formItem, s.select]}
                        value={props.modelValue}
                        onChange={(e: any) => { context.emit('update:modelValue', e.target.value) }}>
                        {props.options?.map(option =>

                            <option value={option.value} >{option.text}</option>
                        )}

                    </select>
                case 'emojiSelect':
                    return <EmojiSelect
                        modelValue={props.modelValue?.toString()}
                        onUpdateModelValue={value => context.emit('update:modelValue', value)}
                        class={[s.formItem, s.emojiList, s.error]} />
                case "validationCode"://验证码
                    return <>
                        <input class={[s.formItem, s.input, s.validationCode]}
                            placeholder={props.placeholder}
                        />
                        <Button onClick={props.onClick} class={s.validationCodeButton}>发送验证码</Button>

                    </>
                case 'date':
                    return <>
                        <input readonly={true} value={props.modelValue}
                            placeholder={props.placeholder}
                            onClick={() => { refDateVisible.value = true }}
                            class={[s.formItem, s.input]} />
                        <Popup position='bottom' v-model:show={refDateVisible.value}>
                            <DatePicker modelValue={(props.modelValue as string).split('-')} title="选择年月日"
                                onConfirm={({ selectedValues }: { selectedValues: string[] }) => {
                                    const date = new Date(
                                        parseInt(selectedValues[0]),
                                        parseInt(selectedValues[1]) - 1,
                                        parseInt(selectedValues[2])
                                    )
                                    context.emit('update:modelValue', new Time(date).format())
                                    refDateVisible.value = false
                                }}

                                onCancel={() => refDateVisible.value = false} />

                            {/* const setDate = ({ selectedValues }: { selectedValues: string[] }) => {
                                            refDate.value = new Date(parseInt(selectedValues[0]), 
                                            parseInt(selectedValues[1]) - 1, 
                                            parseInt(selectedValues[2]))
                                            hideDatePicker()
                                            } */}

                            {/* onConfirm={(date: Date) => {
                                context.emit('update:modelValue', new Time(date).format())
                                refDateVisible.value = false
                            }} */}
                        </Popup></>
                case undefined:
                    return context.slots.default?.()
            }
        })
        return () => {
            return <div class={s.formRow}>
                <label class={s.formLabel}>
                    {props.label &&
                        <span class={s.formItem_name}>{props.label}</span>
                    }
                    <div class={s.formItem_value}>
                        {content.value}
                    </div>
                    {props.error &&
                        <div class={s.formItem_errorHint}>
                            <span>{props.error}</span>
                            {/* <span>{props.error ?? " "}</span>  存在就展示不存在就空*/}
                        </div>
                    }
                </label>
            </div>
        }
    }
})


